import React from 'react'
import { Input,Spin,Button,Upload,Icon,message,Modal} from 'antd';
import * as conf from './config';

class App extends React.Component {

  /**
   * 设置初始值
   * @param props
   */
  constructor(props){
    super(props);
    this.state={
      loading: false,
      previewVisible: false,
      previewImage: '',
      data:[],
      table:'m1b',
      fileList :[]
    }
  }


  /**
   * 第一次渲染后执行
   */
  componentDidMount() {
    this.find();
  }

  /**
   * 查找数据
   */
  find=()=>{
    let params = {
      table:this.state.table,
    };
    conf.request(conf.action.find,params).then((result) => {
      // console.log(result);
      this.setState({
        data:result.data,
        fileList:result.data.ad
      });
    });
  };

  /**
   * 提交修改
   */
  submit=()=>{
    let params = {
      table:this.state.table,
      where:{_id:$('#id').val()},
      name:$('#name').val(),
      number:$('#number').val(),
      footer:$('#footer').val(),
      ad:this.state.fileList,
      adUrl:$('#adUrl').val(),
    };
    if($.isEmptyObject(params.name)||$.isEmptyObject(params.number)||$.isEmptyObject(params.footer)||$.isEmptyObject(params.ad)||$.isEmptyObject(params.adUrl)){
      conf.tips('error','操作失败!','字段不能为空');
    }else{
      this.createUpdate(params);
    }
  };

  /**
   * 更新
   * @param params
   */
  createUpdate=(params={})=>{
    this.setState({ loading: true });
    conf.request(conf.action.createUpdate,params).then((result)=>{
      console.log(result);
      conf.tips(result);
      this.setState({
        loading: false,
      });
      this.find();
    })
  };

  /**
   * 文本框onchange事件
   * @param e
   */
  onChange = (e) => {
    let data = this.state.data;
    let self = e.target;
    let id = self.id; //获取id
    data[`${id}`] = self.value; //获取value
    this.setState({
      data:data
    });
  };

  /**
   * 图片上传onChange
   * @param info
   */
  handleChange = (info) => {
    let fileList = info.fileList;
    fileList = fileList.map((file) => {
      if (file.response) {
        file.thumbUrl = file.response;
        file.url = file.response.url;
      }
      return file;
    });
    console.log(fileList);
    this.setState({ fileList });
  };

  /**
   * 渲染模版
   * @returns {XML}
   */
  render() {
    const data = this.state.data;
    const props = {
      action: conf.upload,
      onChange: this.handleChange,
      multiple: true,
      showUploadList: true,
      listType: 'picture',
    };
    return (
      <Spin spinning={this.state.loading} tip="Loading...">
        <div id="add">
          <input type="hidden" id='id' value={data._id}/>
          <div className="row">
            <div className="title">站点名称：</div>
            <Input id="name" value={data.name} onChange={this.onChange}/>
          </div>
          <div className="row">
            <div className="title">免费数量：</div>
            <Input id="number" value={data.number} onChange={this.onChange}/> <span style={{marginLeft:10}}>用户可以免费阅读多少/张</span>
          </div>
          <div className="row">
            <div className="title">底部信息：</div>
            <Input id="footer" value={data.footer} onChange={this.onChange}/>
          </div>
          <div className="row">
            <div className="title">广告链接：</div>
            <Input id="adUrl" value={data.adUrl} onChange={this.onChange}/>
          </div>
          <div className="row">
            <div className="title">首屏广告：</div>
            <Upload {...props} fileList={this.state.fileList}>
              <Button>
                <Icon type="upload" /> upload
              </Button>
            </Upload>
            {/*图片弹出层*/}
            <Modal visible={this.previewVisible} footer={null} onCancel={this.handleCancel}>
              <img alt="example" style={{ width: '100%' }} src={this.previewImage} />
            </Modal>
          </div>
          <div className="row">
            <Button type='primary' onClick={this.submit} style={{marginLeft:20}}>立即修改</Button>
          </div>
        </div>
      </Spin>
    );
  }
}


export default App